<template>
  <div>
    <el-dialog v-model="visibleDialog" width="75vw" :append-to-body="true" :show-close="false"
      :close-on-click-modal="false" @close="closeClick">
      <template #header>
        <div class="title_box">
          <div class="title_box_left">
            <div class="title1">
              <svg-icon icon-class="date" style="font-size:18px" />
              <span>日程</span>
            </div>
            <el-divider direction="vertical"></el-divider>
            <div slot="reference" class="title2">
              <span>{{ calendarInfo.label }}</span>
            </div>
          </div>
          <div class="title_box_right">
            <div class="icon_box_flex" v-if="isShowEditFunc()">
              <div class="icon_box">
                <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                  <!-- <i class="el-icon-edit " ></i> -->
                  <el-icon @click="editScheduleClick">
                    <Edit />
                  </el-icon>
                </el-tooltip>
              </div>
              <div class="icon_box delete_icon">
                <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                  <!-- <i class="el-icon-delete " ></i> -->
                  <el-icon @click="deleteScheduleClick">
                    <Delete />
                  </el-icon>
                </el-tooltip>
              </div>
              <div class="icon_box ">
                <el-tooltip class="item" effect="dark" content="关闭" placement="bottom">
                  <!-- <i class="el-icon-delete " ></i> -->
                  <el-icon @click="closeClick">
                    <Close />
                  </el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div class="page_dialog">
        <!-- 标题 -->
        <div class="page_header">
          <div class="page_header_title">
            <div class="page_header_title_box">
              <div v-if="calendarInfo.typeName" class="page_header_title_type"
                :style="{ backgroundColor: calendarInfo.calendarColor + '30', color: calendarInfo.calendarColor }">
                <svg-icon icon-class="swagger" />
                {{ calendarInfo.typeName }}
              </div>
              <span style="margin-left:10px">{{ calendarInfo.label }}</span>
            </div>
          </div>
          <div class="page_header_right"
            v-if="isShowEditFunc() && calendarInfo.feedBack === '1' && isShowOperateFunc()">
            <el-button type="primary" class="el_btn_color el_btn_color_primary"
              :class="[userBackActive == 'attend' ? 'primary_color' : '']" @click="userBackActiveClick('attend')">
              参与
            </el-button>
            <el-button type="warning" class="el_btn_color el_btn_color_warning"
              :class="[userBackActive == 'tentative' ? 'warning_color' : '']" @click="userBackActiveClick('tentative')">
              暂定
            </el-button>
            <el-button type="danger" class="el_btn_color el_btn_color_danger"
              :class="[userBackActive == 'decline' ? 'danger_color' : '']" @click="userBackActiveClick('decline')">
              谢绝
            </el-button>
          </div>
        </div>
        <!-- 时间 -->
        <div class="page_times_box">
          <div class="page_time">
            <div class="page_time_day">
              {{ `${moment(calendarInfo.startDate).format("MM月DD日")} ·
              ${moment(calendarInfo.startDate).utcOffset(8).locale('zh-cn').format("dddd")}` }}
            </div>
            <div class="page_time_hour">{{ moment(calendarInfo.startDate).format("HH:mm") }}</div>
            <div class="page_time_text">开始时间</div>
          </div>
          <div class="page_times_center">—</div>
          <div class="page_time">
            <div class="page_time_day">
              {{ `${moment(calendarInfo.endDate).format("MM月DD日")} ·
              ${moment(calendarInfo.endDate).locale('zh-cn').format("dddd")}` }}
            </div>
            <div class="page_time_hour">{{ moment(calendarInfo.endDate).format("HH:mm") }}</div>
            <div class="page_time_text">结束时间</div>
          </div>
        </div>
        <!-- 预估工时 -->
        <div v-if="calendarInfo.workHours" class="row_box">
          <div class="label_title">
            <span style="margin-right:10px">预估工时</span>
            <el-tag type="success">{{ calendarInfo.workHours }}小时</el-tag>
          </div>
        </div>
        <!-- 资源 -->
        <div v-if="resourceList.length != 0" class="row_box">
          <div class="label_title">资源</div>
          <div class="table_NameBox">
            <el-tag class="tag_lebal" v-for="(item, index) in resourceList" :key="index">{{ item.resourceName
              }}</el-tag>
          </div>
        </div>
        <!-- 组织人 -->
        <div class="row_box">
          <div class="label_title">组织人</div>
          <div class="table_NameBox">
            <div class="avatar">
              <span>{{ calendarInfo.createName ? calendarInfo.createName.slice(-2) : "" }}</span>
            </div>
            <div>{{ calendarInfo.createName }}</div>
          </div>
        </div>
        <!-- 参与人 -->
        <div class="row_box">
          <div class="label_title">参与人</div>
          <div class="userInfo">
            <div class="userName" v-for="(item, index) in userFeedBackList" :key="index">
              {{ item.nickName.slice(-2) }}

              <el-icon v-if="item.feedBack == 'tentative'" class="dele_icon"
                @click="deleteUserClick(item.userId, index)">
                <CircleCloseFilled />
              </el-icon>
              <el-icon v-if="item.feedBack == 'attend'" class="satatus_icon" style="background-color:#67C23A">
                <SuccessFilled />
              </el-icon>
              <el-icon v-if="item.feedBack == 'tentative'" class="satatus_icon" style="background-color:#f78f5f">
                <WarningFilled />
              </el-icon>
              <el-icon v-if="item.feedBack == 'decline'" class="satatus_icon" style="background-color:#e04765">
                <CircleCloseFilled />
              </el-icon>

            </div>
            <!-- <div v-if="isShowEditFunc()" class="addPeople" @click="openSelectUser()">
              <el-icon>
                <Plus />
              </el-icon>
            </div> -->
          </div>
        </div>
        <!-- 内容 -->
        <div class="row_box">
          <div class="label_title">内容</div>
          <div class="description">{{ calendarInfo.content ? calendarInfo.content : "暂无详细内容" }}</div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <schedule-select-people ref="ScheduleSelectPeopleRefs"
      @confirmClick="ScheduleSelectPeople_confirmClick"></schedule-select-people> -->
  </div>
</template>

<script lang="ts" setup>
import {
  apiSysCalendarGetDetailShowId,
  apiSysCalendarUpdateFeedBack,
  sysCalendarUpadate,
  apiSysCalendarDelete
} from '@/api/calendar'
import useUserStore from "@/store/modules/user"

import moment from 'moment'
import "moment/dist/locale/zh-cn" // 强制加载完整路径
moment.locale("zh-cn")


const userStore = useUserStore()
const visibleDialog = ref(false)
const userBackActive = ref("")
const calendarId = ref("")

const userFeedBackList = ref([])
const resourceList = ref([])
const editRequestParams = ref({})
let calendarInfo = ref({
  createName: "",
  typeName: "",
  workHours: "",
  label: "",
  startDate: "",
  endDate: "",
  resourceIds: [],
  sheduleId: [],
  scheduleId: "",
  feedBack: "",
  calendarColor: "",
  content: "",
  remindTime: "",
  id: ""
})
const emit = defineEmits(['editScheduleClick', "refresh"])


const getDetail = async (id: any) => {
  calendarId.value = id
  apiSysCalendarGetDetailShowId(calendarId.value).then((res) => {
    visibleDialog.value = true
    calendarInfo.value = res.data.calendar

    userFeedBackList.value = res.data.userFeedBack.map((item) => {
      return {
        ...item,
        id: item.userId,
        nickName: item.userName
      }
    })
    userBackActive.value = res.data.userBack
    resourceList.value = res.data.resource
    editRequestParams.value = {
      label: calendarInfo.value.label || "",
      startDate: calendarInfo.value.startDate || "",
      endDate: calendarInfo.value.endDate || "",
      resourceIds: calendarInfo.value.resourceIds || [],
      scheduleId: calendarInfo.value.scheduleId || "",
      feedBack: calendarInfo.value.feedBack || "",
      calendarColor: calendarInfo.value.calendarColor || "",
      content: calendarInfo.value.content || "",
      remindTime: calendarInfo.value.remindTime || "",
      id: calendarInfo.value.id
    }
    isShowOperateFunc()
  })
}
const isShowOperateFunc = () => {
  let userId = userStore.userId

  let isShowOperate = userFeedBackList.value.findIndex(item => {
    return item.id == userId
  })
  if (isShowOperate == -1) {
    return false
  } else {
    return true
  }
}
const closeClick = () => {
  visibleDialog.value = false
}
// 如果是资源和成员查询的日程点击日程就不能编辑
const isShowEditFunc = () => {
  // if (this.$route.query.people || this.$route.query.resource) {
  //   return false
  // } else {
  //   return true
  // }
  return true
}
const editScheduleClick = () => {
  emit("editScheduleClick", calendarInfo.value, 'detail')
}
const deleteScheduleClick = () => {
  ElMessageBox.confirm('此操作将永久删除该日程, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    apiSysCalendarDelete([calendarInfo.value.id]).then((res) => {
      if (res.code == 200) {
        ElMessage.success("删除成功")
        closeClick()
        emit("refresh")
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}

// 点击了暂定/参加/谢绝 三个按钮
const userBackActiveClick = (val) => {
  apiSysCalendarUpdateFeedBack({
    id: calendarId.value,
    feedBack: val
  }).then((res) => {
    userBackActive.value = val
    ElMessage.success("操作成功")
    getDetail(calendarId.value)
  })
}
// 删除参与人
const deleteUserClick = (userId, index) => {
  let ids = userFeedBackList.value.map((item) => item.id)
  ids.splice(index, 1)
  let params = {
    ...editRequestParams.value,
    userIds: ids
  }
  editApiSysCalendarUpdate(params)
}
const editApiSysCalendarUpdate = (params) => {
  sysCalendarUpadate(params).then((res) => {
    if (res.code == 200) {
      ElMessage.success("操作成功")
      getDetail(calendarId.value)
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const confirmClick = () => {
  visibleDialog.value = false
}
const openSelectUser = () => {

}
defineExpose({
  getDetail
})
</script>

<style lang="scss" scoped>
// 文字几行隐藏
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}

:deep(.el-dialog) {
  margin: 0 auto; //为什么这么写,这么写才生效,才不会出现弹窗滚动效果
  margin-top: 5vh !important;
}

:deep(.el-dialog__body) {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  height: 70vh;
  overflow-y: auto;
}

:deep(.el-dialog__headerbtn) {
  top: 24px;
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title_box_left {
    font-size: 13px;
    display: flex;
    align-items: center;

    .title1 {
      color: #5f6e8e;
      font-size: 15px;
      display: flex;
      align-items: center;

      img {
        width: 20px;
        margin-right: 4px;
      }
    }

    .title2 {
      background-color: #e5ecfa;
      color: #5f6e8e;
      padding: 4px 6px 2px;
      border-radius: 2px;
      line-height: 22px;

      i {
        margin-right: 4px;
      }
    }
  }

  .title_box_right {
    margin-right: 30px;

    .icon_box_flex {
      display: flex;
      align-items: center;
    }

    .icon_box {
      width: 28px;
      height: 28px;
      line-height: 33px;
      text-align: center;
      color: #999;
      margin-right: 10px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;

      &:hover {
        background-color: #eff4ff;
        color: #6698ff;
      }
    }

    .delete_icon:hover {
      background-color: #ffefef !important;
      color: #ff6666 !important;
    }
  }
}

.page_dialog {
  .page_header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .page_header_title {
      font-size: 21px;
      color: #2a344b;
      flex: 1;
      @include textOverflow(1);

      .page_header_title_box {
        display: flex;
        align-items: center;
      }

      .page_header_title_type {
        padding: 4px 5px 3px;
        border-radius: 4px;
        font-size: 12px;
      }
    }

    .page_header_right {
      margin-left: 10px;
    }
  }
}

.el_btn_color {
  color: #666;
  background-color: #fff;
  border-color: #ddd;
}

.primary_color {
  color: #fff;
  background-color: #6698ff;
  border-color: #6698ff;

  &:hover {
    color: #fff !important;
  }
}

.warning_color {
  color: #fff;
  background-color: #f78f5f;
  border-color: #f78f5f;

  &:hover {
    color: #fff !important;
  }
}

.danger_color {
  color: #fff;
  background-color: #e04765;
  border-color: #e04765;

  &:hover {
    color: #fff !important;
  }
}

.el_btn_color_primary:hover {
  color: #6698ff;
  border-color: #6698ff;
}

.el_btn_color_warning:hover {
  color: #f78f5f;
  border-color: #f78f5f;
}

.el_btn_color_danger:hover {
  color: #e04765;
  border-color: #e04765;
}

.page_times_box {
  color: #6698ff;
  margin-top: 20px;
  display: flex;
  align-items: center;

  .page_times_center {
    margin: -12px 30px 0;
    font-weight: bold;
  }

  .page_time_hour {
    font-size: 48px;
    margin: 0px 0 8px -4px;
    font-family: "PingFang SC";
  }

  .page_time_text {
    color: #5f6e8e;
    background: #eef3fc;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline;
  }
}

.label_title {
  color: #666;
  margin-bottom: 8px;
}

.row_box {
  margin-top: 27px;
}

.table_NameBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .tag_lebal {
    margin-bottom: 3px;
    margin-right: 3px;
  }

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    background-color: #6698ff;
    margin-right: 4px;
  }
}

.userInfo {
  display: flex;
  align-items: center;
  width: 526px;
  flex-wrap: wrap;
  // margin: 10px 0; /* 设置上下外边距 */
  // padding: 10px; /* 设置内边距 */
  margin-left: -4px;

  .userName {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    font-size: 12px;
    line-height: 32px;
    background-color: #6698ff;
    text-align: center;
    margin-right: 10px;
    color: white;
    margin: 4px 5px;

    &:hover {
      i {
        opacity: 1;
      }
    }

    .dele_icon {
      position: absolute;
      right: -6px;
      top: -6px;
      font-size: 16px;
      color: black;
      cursor: pointer;
      opacity: 0;

      &:hover {
        color: #fe7575;
      }
    }

    .satatus_icon {
      position: absolute;
      right: -6px;
      bottom: 0px;
      font-size: 13px;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.addPeople {
  border: 1px dashed #ccc;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
  // margin-top: -10px;
  cursor: pointer;

  &:hover {
    // background-color: #f5f5f5;
    border: 1px solid #6698ff;

    i {
      color: #6698ff;
    }
  }
}

.description {
  color: #9eacc4;
}
</style>